<template>
  <h1 :style="{ color: titleInfo.color }">{{ titleInfo.value }}</h1>
  <div>counter: {{ counter }}, doubleCounter: {{ doubleCounter }}</div>
  <!-- 新增待办 -->
  <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))">
  <!-- 待办列表 -->
  <div v-for="(item, index) in items" :key="index">
    <span>{{ item.id }} - {{ item.name }} - {{ item.completed ? '已完成' : '未完成' }}</span>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, defineProps } from 'vue'
// 解决在上面导入PropType报错：“PropType”仅表示类型，但在此处却作为值使用
import type { PropType } from 'vue'
// 这里不加 type 也会报错
import type { TitleInfo } from '../types'

// 属性声明: props
defineProps({
  titleInfo: {
    type: Object as PropType<TitleInfo>,
    required: true
  }
})

type Todo = {
  id: number
  name: string
  completed: boolean
}
const counter = ref(1)
const doubleCounter = computed(() => counter.value * 2)

const items = ref([] as Todo[])
items.value.push({
  id: 1,
  name: 'vue3学习',
  completed: false
})

const todoName = ref('')
const newTodo = (todoName: string): Todo => {
  return {
    id: items.value.length + 1,
    name: todoName,
    completed: false
  }
}
const addTodo = (todo: Todo): void => {
  items.value.push(todo)
  todoName.value = ''
}

</script>

<style></style>